<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="105">
          <!--<FormItem label="IFrame ID">
            <Input size="small" v-model="id" placeholder="对应iframe的id属性"/>
          </FormItem>-->
          <FormItem>
            <Checkbox v-model="designPhaseNotLoad">设计阶段不加载页面</Checkbox>
          </FormItem>
          <FormItem label="名称">
            <Input size="small" v-model="name" placeholder="对应iframe的name属性"/>
          </FormItem>

          <FormItem label="链接地址">
            <Input size="small" v-model="srcPathData" placeholder="" @on-blur="updateSrcPath"/>
          </FormItem>

          <FormItem label="宽度">
            <InputNumber class="m-r-5px" size="small" :max="10000" :min="0" :step="1" v-model="width"></InputNumber>
            <Select transfer size="small" v-model="widthPixelUnit" :style="{width: '60px'}">
              <Option v-for="item in $PnDict.pixelUnits" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="高度">
            <InputNumber class="m-r-5px" size="small" :max="10000" :min="0" :step="1" v-model="height"></InputNumber>
            <Select transfer size="small" v-model="heightPixelUnit" :style="{width: '60px'}">
              <Option v-for="item in $PnDict.pixelUnits" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="滚动条">
            <RadioGroup v-model="scrolling" type="button" size="small">
              <Radio v-for="item in $PnDict.iframeScrollings" :label="item.value" :key="item.value">{{ item.label }}</Radio>
            </RadioGroup>
          </FormItem>
          <FormItemPanel title="自定义样式">
            <Alert type="info" show-icon>可直接设置IFrame标签样式</Alert>
            <CodeEditor v-model="customStyleCode" mode="css"></CodeEditor>
          </FormItemPanel>

        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="IFrameComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="消息监听队列">
            <Alert :style="{padding: '10px'}">
              消息监听队列的运行脚本中，全局变量【this】已切换为【_this】
            </Alert>
            <div class="float-right">
              <Button class="m-r-5px" size="small" type="primary" @click="saveEventListeners">
                <Icon custom="iconfont iconsave-fill"/> 保存更改
              </Button>
              <Button class="" size="small" type="primary" @click="addEventListenerItem()"><Icon type="md-add" /> 新增监听</Button>
            </div>
            <div class="clearfix"></div>
            <div class="m-b-10px"></div>

            <Collapse accordion>
              <Panel :name="$PnUtil.uuid()" v-for="(eventListener, index) in eventListenersData" :key="index">
                {{eventListener.type}}
                <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteEventListenerItem(index)"><Icon type="md-trash" /></a>
                <div slot="content">
                  <i-input size="small" v-model="eventListener.type">
                    <span slot="prepend">监听类型</span>
                  </i-input>
                  <div class="m-b-5px"></div>
                  <CodeEditor v-model="eventListener.runJsCode"></CodeEditor>
                </div>
              </Panel>
            </Collapse>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>

</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'IFrameCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        srcPathData: '',
        eventListenersData: null,

        documentDrawerVisible: false,
      }
    },
    mounted() {
      if (this.srcPath) {
        this.srcPathData = this.srcPath
      }
      if (this.eventListeners) {
        this.eventListenersData = this.$PnUtil.deepClone(this.eventListeners)
      }
    },
    methods: {
      updateSrcPath () {
        this.updateField('component.compConfigData.srcPath', this.srcPathData)
      },

      saveEventListeners () {
        this.eventListeners = this.$PnUtil.deepClone(this.eventListenersData);
        this.$Message.success('监听队列保存成功，请记得保存页面')
      },

      addEventListenerItem () {
        this.eventListenersData.push({
          type: 'newListener',
          runJsCode: ''
        })
      },

      deleteEventListenerItem (index) {
        if (this.eventListenersData.length > 1) {
          this.eventListenersData.splice(index, 1)
        }
      }
    },
    computed: {
      ...mapFields({

        // id: 'component.compConfigData.id',
        srcPath: 'component.compConfigData.srcPath',

        width: 'component.compConfigData.width',
        widthPixelUnit: 'component.compConfigData.widthPixelUnit',
        height: 'component.compConfigData.height',
        heightPixelUnit: 'component.compConfigData.heightPixelUnit',
        frameborder: 'component.compConfigData.frameborder',
        name: 'component.compConfigData.name',
        scrolling: 'component.compConfigData.scrolling',
        designPhaseNotLoad: 'component.compConfigData.designPhaseNotLoad',

        eventListeners: 'component.compConfigData.eventListeners',

        customStyleCode: 'component.compConfigData.customStyleCode',

      })
    }
  }
</script>

<style scoped>
  .language-javascript {
    border: 1px solid red !important;
    background-color: red !important;
  }
</style>
